Tips

The foreman also has several tips that will make your recipes turn out "just right".


The Foreman's thoughts on Mac OS X

With the introduction of Thumbnail or 128 x 128 pixel icons in Mac OS X, there are several new factors to be considered when designing and building icons for the new OS. It is unlikely that designers will be using the traditional "pushing pixels" method of icon creation, and will be instead, moving toward a more graphical or image based method. We're willing to bet that almost all designers will chose to render these new format icons in paint programs like Photoshop, or vector based software like Illustrator or Freehand. Some may even choose to "render" out icons in 3D format with programs like Electric Image or Strata StudioPro. No matter what the tool of choice however, there are a few design tips that are important to keep in mind when building for X:

Is a single resource good enough? Apple is betting that OS X's ability to scale down the 128 x 128 thumbnail icon is so good, in many cases you won't need to bother with the smaller traditional or "hint" sizes of 48 x 48, 32 x 32 or 16 x 16. We suggest ALWAYS including the hint sizes. If not the 48's, then at least the 32's and 16's. Image data will always loose detail when scaled down to these small sizes and if you want a user to get the clearest picture, include the hints. This leads us to the next point....

When making use of words or characters in icons, hints are a must. Hints become crucial if your icons contain words or readable characters (like Photoshop's file format icons). Anti-aliased type in a 128 x 128 icon becomes quite blurry at 32 x 32, so it's best to design a custom 32 hint size to swap out at these small sizes.

Consider "beefing" up line weights for Mac OS X. Keep in mind that line widths are also being scaled down as well as the overall image. If you have an element in a thumbnail icon with a single pixel line weight as its border, this line will break up significantly when dynamically scaled down. If you don't want to loose edge definition, we suggest using at least 2 or 3 pixel line weights for the edges of objects.

Mac OS X is NOT copland. One thing we've run into with the release of X is Apple's insistence on using the 3D Copland angle for certain elements in the OS. This is especially true of the folders. It is our humble opinion, that this style is not necessarily the best approach for icon design with the format moving up to such a large size as 128 x 128. Copland worked on the old desktop because the angle forced the perspective of such a small canvas and tricked the eye into seeing a very dimensional icon. With the larger canvas to work with, the exaggerated 2x1 angle of Copland icons is unnecessary. With a little additional time and effort, much more subtle 3D effects can be achieved.  We suggest staying away from Copland style 128 x 128 icons for now.

Mac OS X File sizes. With the addition of thumbnail icons, and the future possible addition of "states" for those thumbnail icons, file sizes for individual icons are about to soar. Combine these with the traditional hint sizes that designers will be including to ensure backward compatibility, and you can easily design an icon that reaches 200 or 300 Kb in size. These are important factors when building your icons. Don't include resources that are not needed. Mac OS X has completely eliminated the need for 4 bit or 16 color icons. If the OS won't read that resource, then don't bother to include it.

Keep it simple. Despite the temptation to include much more detail in an icon given the larger canvas, it is still best to keep your icon designs simple. Although some users may indeed see the 128 x 128 version of the icon from time to time (in the dock or elsewhere), we're willing to bet that most users will set their default icon sizes to either 48 x 48 or 32 x 32. The thumbnail version can have more of a "cool" looking effect or be rendered tighter than the smaller ones, but its best to keep their overall designs unified. Don't make a detailed "Roadmap" in the 128 x 128 and then simplify it to a "Street" in the 32x32 version. All sizes and versions should be consistent.


Start with 256 color versions (Mac OS 9)

We've found through experience that its best to start with the 32 x 32 pixel, 256 color icon when you begin to make an individual icon. Its always easier to start with a lower "base" model and add onto it than to start with the best possible looking icon and "dumb it down". What does this mean? Start your creation process by getting the 256 version to look right and THEN add the flashy gradients and smooth edges of 32-bit icons. Remember that many users will only see the 256 versions.


Start with 16 color versions (Windows)

The same reasoning applies to Windows, but at a lower color depth. A majority of Windows users will be seeing a 16 color icon. Work out your ideas in 16 colors and then make a 256 color icon. For more info about Windows icons, see our guide in the IconBuilder Pro folder.


Adding custom list view icons

If you're an icon perfectionist, like the factory workers are, then you'll want your small, list view icons to look as good as your 32 x 32 pixel icons. This means not simply cropping the larger versions to fit (as that sometimes is the case) but instead to design the smaller icon versions by hand. When working with IconBuilder Pro, its best to always use a 48 x 48 pixel canvas and build each of your different icon sizes and bit depths on their own layers. In this way, you can do a QuickBuild to get all the basic shapes and masks into the icon grid, but then you can go back and add each custom size and depth manually until it's perfect.


Timesaving techniques

• QuickBuild is powerful, but it won't do everything for you. You'll need to sometimes add custom resources one by one.

• Know your modifier keys (they are discussed in the next section). These can save you a great deal of time in the long run.

• Always keep a copy of your layers file saved in a safe place. If you have to recreate an icon, the individual layers will be a blessing in disguise.

• Don't forget to view your work against both dark and light background textures. This helps you pinpoint mask errors and stray pixels.


The joys of Photoshop layers

Making a custom icon from individual layers is one of the best ways to manipulate an icon. Whether your making icons for corporate clients, or just for fun, having portions of your icons on different layers really helps to be able to quickly and easily move things around, recolor or resize. Keeping your layers safe means that you can always rebuild your icon with just a few keystrokes instead of having to redraw or modify the entire image.


Use Photoshop to your advantage

Some good advice when making icons from layers in Photoshop:

• Always remember to name individual layers. It can get easy to loose track of what is what if you don't label each layer accordingly.

• If you don't already have the checkerboard pattern turned on in layers, turn it on. It is much easier to spot semitransparent pixels against the checkerboard pattern than against the white of the background layer.

• Experiment with the opacity settings of a layer to help achieve the proper settings for masking.

• Pick a canvas size that meets your needs. If you are working on a Mac OS X icon, you'll want to use at least 128 x 128 pixels. If the icon is for Windows or and older version of the Mac OS, you'll want to use a smaller size.


Don't add resources you don't need

Not all icons need every resource. Consider your audience and add resources appropriately. Not all icons need 32-bit versions. If you're making an icon for Mac OS 8.1 or lower, delete (or just don't add) the 32-bit resources to the icon grid. Doing so will add unnecessary file size to the icon. Remember that Shift/Control modifier keys will also work with deleting.


See icon file sizes as you build

Click on the small Iconfactory logo next to the BuilderTips at the bottom of the interface to turn off the roll over help messages. In its place, will be displayed a constant message about the current file size of the icon you're working on. Watch the numbers increase as you add resources to the icon grid.